<template>
  <el-container class="personalCenter-container">
    <div class="personalCenter-main">
      <div class="aside">
        <el-card class="aside-card">
          <el-row>
            <el-col :span="24">
              <!-- 向后端请求头像，没有设置头像，默认展示昵称的部分内容（字符串展示首字母，数字也是一样） -->
              <el-image
                style="width: 120px; height: 120px; border-radius: 50%"
                class="avatar-image"
                :src="userInfo.avatarUrl"
                fit="cover"
              >
                <!-- 加载显示 -->
                <div slot="placeholder" class="image-slot">
                  头像加载中...<i class="el-icon-loading"></i>
                </div>
                <!-- 异常显示 -->
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture" style="font-size: 50px"></i>
                </div>
              </el-image>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="nickName" style="font-size: 18px; font-weight: 700">
                {{ userInfo.nickName }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="userName" style="font-size: 14px">
                {{ userInfo.userName }}
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="introduction" style="font-size: 14px">
                {{ userInfo.introduction }}
              </div>
            </el-col>
          </el-row>
          <el-row v-if="isInterestTagsNotEmpty()">
            <el-col :span="24">
              <div class="interest-tags">
                <el-tag
                  v-for="(tag, index) in userInfo.interestTags"
                  :key="index"
                  effect="dark"
                  type="info"
                  size="mini"
                  :hit="true"
                  style="margin-right: 8px; margin-bottom: 8px"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <!-- 点击个人设置进入账号信息界面 -->
              <el-button
                plain
                size="small"
                round
                icon="el-icon-setting"
                style="font-size: 14px"
                @click="goAccountInformation"
                >个人设置</el-button
              >
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="main">
        <el-card class="main-card" ref="mainCard">
          <el-menu
            default-active="1-1"
            class="el-menu-personal-center"
            mode="horizontal"
            background-color="#242639"
            text-color="#fff"
            active-text-color="#6495ED"
            unique-opened
            @select="handleMenuSelect"
          >
            <el-submenu index="1">
              <template slot="title"
                ><i class="el-icon-document"></i
                ><span slot="title">我的文章</span></template
              >
              <el-menu-item index="1-1">
                <i class="el-icon-s-order"></i>
                全部文章
              </el-menu-item>
              <el-menu-item index="1-2">
                <i class="el-icon-edit-outline"></i>
                草稿箱
              </el-menu-item>
              <el-menu-item index="1-3">
                <i class="el-icon-loading"></i>
                待审核
              </el-menu-item>
              <el-menu-item index="1-4">
                <i class="el-icon-document-remove"></i>
                被驳回
              </el-menu-item>
              <el-menu-item index="1-5">
                <i class="el-icon-document-checked"></i>
                已发布
              </el-menu-item>
            </el-submenu>
            <el-menu-item index="2"
              ><i class="el-icon-star-off"></i>我的收藏</el-menu-item
            >
            <el-menu-item index="3"
              ><i class="el-icon-user"></i>我的关注</el-menu-item
            >
            <el-submenu index="4">
              <template slot="title"
                ><i class="el-icon-reading"></i
                ><span slot="title">浏览历史</span></template
              >
              <el-menu-item index="4-1"
                ><i class="el-icon-notebook-2"></i>我的足迹</el-menu-item
              >
              <el-menu-item index="4-2"
                ><i class="el-icon-chat-line-square"></i>我的评论</el-menu-item
              >
              <el-menu-item index="4-3"
                ><i class="el-icon-thumb"></i>我的点赞</el-menu-item
              >
            </el-submenu>
            <el-submenu index="5">
              <template slot="title"
                ><i class="el-icon-message"></i
                ><span slot="title">我的消息</span></template
              >
              <el-menu-item index="5-1">
                <i class="el-icon-thumb"></i>
                收到的赞
              </el-menu-item>
              <el-menu-item index="5-2">
                <i class="el-icon-chat-line-round"></i>
                收到的评论
              </el-menu-item>
              <!-- <el-menu-item index="5-3">
                <i class="el-icon-star-off"></i>
                收到的收藏
              </el-menu-item> -->
              <!-- <el-menu-item index="5-4">
                <i class="el-icon-user"></i>
                收到的关注
              </el-menu-item> -->
              <!-- <el-menu-item index="5-5">
                <i class="el-icon-s-promotion"></i>
                收到的回复
              </el-menu-item> -->
            </el-submenu>
            <el-menu-item index="6">
              <i class="el-icon-s-data"> </i>
              <span slot="title">数据可视化</span>
            </el-menu-item>
          </el-menu>
          <div class="main-content">
            <router-view></router-view>
          </div>
        </el-card>
      </div>
    </div>
  </el-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getWholeUserInfo } from "@/apis/apis";
@Component({
  name: "PersonalCenter",
})
export default class PersonalCenter extends Vue {
  // 用户信息
  userInfo: {
    nickName?: string;
    userName?: string;
    introduction?: string;
    interestTags?: string[];
    avatarUrl?: string;
  } = {
    nickName: "",
    userName: "",
    introduction: "这个人很懒，什么都没有留下",
    interestTags: ["爬山", "游泳", "跑步"],
    avatarUrl: "",
  };
  // 默认展示全部文章选项的内容
  mounted(): void {
    this.handleMenuSelect(this.activeIndex);
    this.getPartUserInfo();
  }
  activeIndex: string = "1-1";
  // 导航栏的菜单项对应的路由地址
  routerSet: { [key: string]: string } = {
    "1-1": "/all-articles",
    "1-2": "/draft-box",
    "1-3": "/wait-review",
    "1-4": "/rejected-articles",
    "1-5": "/published-articles",
    "2": "/my-collection",
    "3": "/my-follow",
    "4-1": "myBrowse",
    "4-2": "/my-comment",
    "4-3": "/my-like",
    "5-1": "myAcceptLike",
    "5-2": "myAcceptComment",
    // "5-3": "myAcceptCollection",
    // "5-4": "myAcceptAttention",
    // "5-5": "myAcceptReply",
    "6": "/charts",
  };

  //   判断兴趣标签是否不为空
  isInterestTagsNotEmpty(): boolean {
    return this.userInfo.interestTags!.length !== 0;
  }
  // 菜单选中、路由切换
  handleMenuSelect(index: string, indexPath?: string): void {
    this.activeIndex = index;
    if (
      this.isNotCurrentRoute(this.$route.path, this.routerSet[this.activeIndex])
    ) {
      this.$router.push({
        path: "/personalCenter" + this.routerSet[this.activeIndex],
      });
    } else {
      this.$notify({
        title: "提示",
        message: "您已在当前页面",
        type: "warning",
        duration: 3000,
      });
    }
  }
  /**
   * 判断当前组件是否是当前路由
   * @param sourcePath 当前路由地址
   * @param targetPath 目标组件路由地址
   * @param basePath 目标组件的父级路由地址
   */
  isNotCurrentRoute(
    sourcePath: string,
    targetPath: string,
    basePath = "/personalCenter"
  ): boolean {
    // console.log(sourcePath, basePath + targetPath);
    return sourcePath !== basePath + targetPath;
  }

  // 获取用户的个人信息
  getPartUserInfo(): void {
    getWholeUserInfo()
      .then((res) => {
        let resData = res.data.data;
        if (res.data.code === "200") {
          this.userInfo.nickName = resData.nickName;
          this.userInfo.userName = resData.userName;
          this.userInfo.introduction = resData.introduction;
          this.userInfo.interestTags = resData.tags.map(
            (item: any) => item.tagName
          );
          this.userInfo.avatarUrl = resData.avatar;
        } else {
          this.$message.error("获取用户信息失败");
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }

  // !TODO:处理删除自己的博客
  handleDeleteBlog(index: number, row: any): void {
    // 操作会返回promise对象，据此进行操作
    this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        // 向后端发出删除请求，删除成功后给出提示信息
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      })
      .catch(() => {
        // 取消删除
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    console.log(index, row);
  }
  /**
   * 跳转到个人设置界面
   */
  goAccountInformation(): void {
    this.$router.push({ name: "accountInformation" });
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/themes.scss";
.personalCenter-container {
  display: flex;
  justify-content: center;
  // 左右两侧相加的宽度
  width: 1370px;
  margin: 0 auto;

  .personalCenter-main {
    display: flex;
    justify-content: center;

    .aside {
      // background-color: #d3dce6;
      color: #333;
      display: flex;
      justify-content: center;
      height: 500px;
      width: 290px;
      min-width: 290px;
      // 左右间隔保持在10px
      .aside-card {
        width: 280px;
        height: 480px;
        @include useTheme {
          background-color: getVar("divColor");
          color: getVar("textColor");
        }
        // 正确的书写是加上括号
        ::v-deep(.el-card__body) {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        // 设置row间隔
        .el-row {
          margin-bottom: 15px;
          &:last-child {
            margin-bottom: 0;
          }
        }
        // 头像的图片设置
        .avatar-image {
          width: 120px;
          height: 120px;
          border-radius: 50%;
          // 设置图片加载中的样式
          // 头像加载失败时显示的样式，两个样式一样的
          .image-slot {
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid gray;
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
    }
    .main {
      // background-color: #e9eef3;
      color: #333;
      // 查看超出显示的部分
      padding: 0px 5px 10px 5px;
      width: 1050px;
      min-width: 1050px;
      // 显示器适配
      // height: 1140px;
      // 显示内容适配
      min-height: 800px;
      overflow: auto;
      .main-card {
        width: 100%;
        height: 100%;
        @include useTheme {
          background-color: getVar("divColor");
          color: getVar("textColor");
        }
        // 正确的书写是加上括号
        ::v-deep(.el-card__body) {
          padding: 0px;
        }
      }
    }
  }
}
</style>